<template>
<div>
    <!-- <loading loadingStyle="height: 200px" v-if="!userInfo"></loading> -->
    <header class="newsHead clearfix" v-if="user.userInfo">
        <div class="headLeft">
            <div class="newsHeadImg">
                <img :src="user.userInfo.data.avatar" alt="">
            </div>
            <div class="newsHeadInfo">
                <p class="userName">
                    {{user.userInfo.data.name}}
                    <i class="userNameV"></i>
                </p>
                <p class="vipTime" v-if="user.userInfo.data.is_vip">
                    VIP有效期至：<span>{{user.userInfo.data.vipduetime}}</span>
                </p>
                <p class="vipTime" v-else>
                    尚未开通VIP
                </p>
                <p class="userMsgCodeId">
                    账号：<span>{{user.userInfo.data.mobile}}</span>
                    <!-- ID：<span>{{userInfo.data.user_id}}</span> -->
                </p>
            </div>
        </div>
        <div class="headRight">
            <p>
                交易币：<span>{{user.userInfo.data.coins}}</span>
            </p>
            <p>
                人民币余额：<span>￥{{user.userInfo.data.money}}</span>
            </p>
            <p>
                <button class="yseCash" @click="cashMaskShow">提现</button>
            </p>
        </div>
    </header>
    <div v-if="cashMask" class="cashMask">
        <ul class="cashMaskBox">
            <li class="cashMasList" v-if="applyMoney=='1'">
                <header class="cashMasListTitle">
                    提现金额
                </header>
                <p class="cashTips"> 每次提现金额需不小于￥100</p>
                <div class="moneyNumber">
                    <input type="text" placeholder="请输入提现金额" v-model="moneyNumber">
                </div>
                <p class="cashCareful">
                    <i></i>您的账户余额 <span>￥{{user.userInfo.data.money}}</span> 
                </p>
                <div class="cashBtn">
                    <button @click="goApply">申请提现</button>
                </div>
                <span class="el-icon-close cashClose" @click="cashMaskHide"></span>
            </li>
            <!-- <li class="cashMasList" v-else-if="applyMoney=='2'">
                <header class="cashMasListTitle">
                    验证手机号
                </header>
                <p class="cashTips">您当前绑定的手机号为<span>{{userInfo.data.mobile}}</span></p>
                <div class="moneyNumber applyNumber">
                    <input type="text" placeholder="请输入提现金额" v-model="applyNumber"> <button>获取验证码</button>
                </div>
                <p class="cashCareful">
                    <i></i>请输入正确的验证码
                </p>
                <div class="cashBtn">
                    <button @click="applySuccess">申请提现</button>
                </div>
                <span class="el-icon-close cashClose" @click="cashMaskHide"></span>
            </li> -->
            <li class="cashMasList" v-else-if="applyMoney=='3'">
                <header class="cashMasListTitle">
                    申请成功
                </header>
                <p class="cashTips applySuccess">
                    <img src="../../../img/applySuccess.png" alt="">
                </p>
                <p class="cashCareful applyTips">
                    提现会在3-5个工作日内到账，如遇特殊情况延期请留意官网通知
                </p>
                <div class="cashBtn applyBtn">
                    <button @click="cashMaskHide();go0()">关闭</button>
                </div>
                <span class="el-icon-close cashClose" @click="cashMaskHide();go0()"></span>
            </li>
        </ul>
       
    </div>
</div>
    
</template>
<script>
import loading from '../../loading'
import {mapState} from 'vuex';
export default {
    name:"userHead",
    // props: ["userInfo"],
    data () {
        return {
            cashMask : false,
            maskH : "500px",
            applyMoney : "1",
            moneyNumber : "",//提现金额
            applyNumber : "",//验证码
            userInfo : null,
        }
    },
    methods: {
        go0(){
            window.location.reload();
        },
        // 提现弹出框的显示与隐藏
        cashMaskShow(){//
            this.cashMask = true;
        },
        cashMaskHide(){
            this.cashMask = false;
            this.moneyNumber = "";
            this.applyNumber = "";
            this.applyMoney = "1";
            
        },
        successPoint(msg) {//失败的提示
            this.$message({
                message: msg,
                type: 'success',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true,
            });
       },
       errorPoint(msg) {//失败的提示
            this.$message({
                message: msg,
                type: 'error',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true,
            });
       },
        //验证码页面
        goApply(){
            if(!this.userInfo.data.tixianaccount||!this.userInfo.data.realname){
                this.errorPoint("请绑定支付宝账号后再申请提现")
            }else if(!this.moneyNumber){
                this.errorPoint("请输入提现金额")
            }else if(isNaN(parseInt(this.moneyNumber))){
                this.errorPoint("请输入正确的提现金额")
            }else{
                axios.post('/shenqingtixian',{"tixianmoney":this.moneyNumber}).then(response => {
                    if(response.data.status=="0"){
                        this.errorPoint(response.data.message);
                    }else{
                        // this.successPoint(response.data.message);
                        this.applyMoney = "3"
                    }
                    
                })
            }
            
        },
        //申请成功
        applySuccess(){
            if(!this.applyNumber){
                this.errorPoint("请输入验证码")
            }else{
                /* axios.post('/updateinfo',formData).then(response => {
                    this.successPoint("修改成功")
                    this.applyMoney = "3"
                }) */
            }
            
        }
    },
    components:{
        loading
    },
    computed:{
        ...mapState({
            user: state => state.AuthUser
        })
    },
    created() {
        /* console.log(this.user)
        this.userInfo = this.user.userInfo;
        console.log(this.userInfo) */
        /* axios.get("/userinfo/getuser").
        then(response=>{
            this.userInfo = response.data;
            console.log(this.userInfo)
        }).catch(error=>{
            console.log(error)
        }) */
    },
    
}
</script>
<style scope>
    .yseCash{
        width: 76px;
        line-height: 28px;
        font-size: 14px;
        color: #fff;
        padding: 0;
        border: none;
        background: #ea514b;
        outline: none;
    }
    .yseCash:hover{
        background: #ee8782;
    }
    .noCash{
        background: #999999;
    }
    .cashMask{
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.45);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
    }
    .cashMaskBox{
        width: 386px;
        height:312px;
        background: #fff;
        margin: 300px auto;
    }
    .cashMasList{
        padding-top: 23px;
        position: relative;
    }
    .cashMasListTitle{
        font-size: 18px;
        line-height: 38px;
        color: #333333;
        text-align: center;
    }
    .cashTips{
        font-size: 12px;
        line-height: 50px;
        text-align: left;
        padding-left: 42px;
        color: #4e4e4e;
    }
    .moneyNumber{
        text-align: center;
    }
    .moneyNumber input{
        width: 298px;
        height: 38px;
        border: none;
        border: 1px solid #dddddd;
        font-size: 14px;
        line-height: 38px;
        padding: 0;
        padding-left: 12px;
        outline: none;
    }
    .cashCareful{
        font-size: 12px;
        line-height: 34px;
        color: #e1706a;
        padding-left: 43px;
    }
    .cashCareful i{
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(../../../img/wonder.png) no-repeat;
        vertical-align: middle;
        margin-right: 6px;
    }
    .cashBtn{
        text-align: center;
        margin-top: 43px;
    }
    .cashBtn button{
        width: 300px;
        height: 50px;
        background: #ea514b;
        color: #fff;
        padding: 0;
        border: none;
        outline: none;
    }
    .cashClose{
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 20px;
    }
    .applyNumber input{
        width: 148px;
    }
    .applyNumber button{
        width: 135px;
        height: 40px;
        border: none;
        padding: 0;
        font-size: 14px;
        line-height: 40px;
        color: #fff;
        background:#ea514b;
        margin-left: 7px;
    }
    .applySuccess{
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 0;
    }
    .applyTips{
        padding: 0 68px;
        text-align: center;
        color: #7f7f7f;
        line-height: 18px;
    }
    .applyBtn{
        margin-top: 13px;
    }
</style>
